<template>
    <div>
        <!-- 技术解释区域 -->
        <div style="background-color: #f3e5f5; padding: 15px; margin-bottom: 20px; border-radius: 8px; border-left: 4px solid #9C27B0;">
            <h3 style="color: #7B1FA2; margin-top: 0;">🎨 技术解释：Style 绑定</h3>
            <p><strong>对象语法：</strong>使用 <code>:style="{property: value}"</code> 直接绑定CSS属性，属性名可以是驼峰式或短横线分隔。</p>
            <p><strong>数组语法：</strong>使用 <code>:style="[obj1, obj2]"</code> 可以应用多个样式对象，后面的对象会覆盖前面的同名属性。</p>
            <p><strong>计算属性：</strong>当样式逻辑复杂时，使用计算属性返回样式对象，提供更好的可读性和性能。</p>
            <p><strong>动态值：</strong>样式值可以是变量、表达式或函数返回值，支持单位自动添加（如px）。</p>
        </div>

        <!-- 交互演示区域 -->
        <div style="background-color: #f5f5f5; padding: 20px; border-radius: 8px; margin-bottom: 20px;">
            <h3>Style 绑定演示</h3>
            
            <!-- 控制面板 -->
            <div style="margin-bottom: 20px; padding: 15px; background-color: white; border-radius: 4px; border: 1px solid #ddd;">
                <div style="margin-bottom: 10px;">
                    <label style="display: inline-block; width: 100px;">颜色选择：</label>
                    <select v-model="colorClass" style="padding: 5px; border: 1px solid #ddd; border-radius: 4px;">
                        <option value="red">红色</option>
                        <option value="blue">蓝色</option>
                        <option value="green">绿色</option>
                        <option value="purple">紫色</option>
                    </select>
                </div>
                
                <div style="margin-bottom: 10px;">
                    <label style="display: inline-block; width: 100px;">字体大小：</label>
                    <input v-model.number="fontSize1" type="range" min="12" max="48" style="margin-right: 10px;">
                    <span>{{ fontSize1 }}px</span>
                </div>
                
                <div style="margin-bottom: 10px;">
                    <label style="display: inline-block; width: 100px;">数组模式：</label>
                    <button @click="toggleArrayStyle" style="padding: 5px 10px; background-color: #2196F3; color: white; border: none; border-radius: 4px; cursor: pointer;">
                        切换样式组合
                    </button>
                </div>
            </div>

            <!-- 示例展示 -->
            <div style="border: 1px solid #ddd; padding: 15px; border-radius: 4px; background-color: white;">
                <div style="margin-bottom: 15px;">
                    <strong>1. 对象语法：</strong>
                    <div :style="{color:colorClass, fontSize:fontSize1+'px'}" style="margin-top: 5px; padding: 10px; background-color: #f9f9f9; border-radius: 4px;">
                        style 动态颜色和字体大小
                    </div>
                </div>
                
                <div style="margin-bottom: 15px;">
                    <strong>2. 数组语法：</strong>
                    <div :style="[style01,style02]" style="margin-top: 5px; padding: 10px; background-color: #f9f9f9; border-radius: 4px;">
                        数组模式样式组合
                    </div>
                </div>
                
                <div>
                    <strong>3. 计算属性：</strong>
                    <div :style="computedStyles" style="margin-top: 5px; padding: 10px; background-color: #f9f9f9; border-radius: 4px;">
                        计算属性控制的样式
                    </div>
                </div>
            </div>

            <!-- 当前状态显示 -->
            <div style="margin-top: 15px; padding: 10px; background-color: #e8f5e8; border-radius: 4px;">
                <strong>当前样式状态：</strong>
                <p>颜色: {{ colorClass }} | 字体大小: {{ fontSize1 }}px</p>
                <p>数组样式: {{ JSON.stringify([style01, style02]) }}</p>
            </div>
        </div>
    </div>
</template>
<script>
export default{
    computed:{
        computedClasses(){
            return {
                'red': this.isRed,
                'bold':this.isBold
            };
        },
        computedStyles(){
            return {
                color : this.colorClass,
                fontSize : this.fontSize1 + 'px'
            }
        }
    },
    data() {
        return {
            isRed: true,
            isBold : false,
            colorClass : "red",
            fontSize1 : 20,
            style01 :{
                color : 'red'
            },
            style02 :{
                fontSize : '16px'
            }
        };
    },
    methods: {
        toggleArrayStyle() {
            // 切换数组样式的组合
            if (this.style01.color === 'red') {
                this.style01 = { color: 'blue', fontWeight: 'bold' };
                this.style02 = { fontSize: '24px', textDecoration: 'underline' };
            } else {
                this.style01 = { color: 'red' };
                this.style02 = { fontSize: '16px' };
            }
        }
    },
}
</script>
<style>
.red{
    color: rgb(255, 0, 0);
}
.bold{
    font-weight: bold;
}
</style>